<template>
    <div class="app-container home">
        <div v-has-permi="['index:data:admin']">
            <div class="title-box">仓储数据看板</div>
            <el-row :gutter="5">
                <el-col :span="4" v-for="(item, key) in detail.dataList">
                    <div class="card-box" @click="openDetail(item, key)">
                        <div class="label-box">{{item.label}}</div>
                        <div class="value-box" :style="item.valueStyle ? item.valueStyle: ''">{{item.value}}</div>
                        <div class="text-box" :style="item.text ? '': 'opacity: 0;'">{{item.text ? item.text: '1'}}</div>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="6">
                    <div class="circular-box">
                        <circular-chart dom-id="my_chart1" title="入库机器价格区间分布" :data="costChatData" />
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="circular-box">
                        <circular-chart dom-id="my_chart2" title="成色分布数据" :data="finenessChatData" />
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="circular-box">
                        <circular-chart dom-id="my_chart3" title="回收品牌占比拼图" :data="brandChatData" />
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="circular-box">
                        <circular-chart dom-id="my_chart4" title="回收价格占比拼图" :data="priceChatData" />
                    </div>
                </el-col>
            </el-row>

            <div class="circular-box" style="height: 600px;margin-top: 20px">
                <div style="padding: 10px">
                    <el-form label-position="left">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="成色">
                                    <el-select v-model="queryParams.fineness" placeholder="请选择成色" clearable>
                                        <el-option v-for="item in qualityList" :label="item.qualityName" :value="item.qualityName" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="型号">
                                    <el-select filterable remote placeholder="请输入商品关键字" style="width: 50%"
                                               v-model="queryParams.shareGoodsId" :remote-method="getShareGoodsOptions" clearable>
                                        <el-option v-for="good in shareGoodsOptions"
                                                   :key="good.goodsId"
                                                   :label="good.goodsName"
                                                   :value="good.goodsId" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="价格">
                                    <el-input type="number" v-model="queryParams.startPrice" placeholder="最小金额" style="width: 130px" clearable />
                                    -
                                    <el-input type="number" v-model="queryParams.endPrice" placeholder="最大金额" style="width: 130px" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="时间">
                                    <el-select v-model="queryParams.time">
                                        <el-option value="day" label="日" />
                                        <el-option value="month" label="月" />
                                        <el-option value="year" label="年" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" @click="getIndexData()">搜索</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div id="left_chart" style="width: 100%;height: 400px"></div>
            </div>

            <div class="circular-box" style="height: 600px;margin-top: 20px">
                <div style="padding: 10px">
                    <el-form label-position="left">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="时间">
                                    <el-select v-model="queryParams.rightTime">
                                        <el-option value="day" label="日" />
                                        <el-option value="month" label="月" />
                                        <el-option value="year" label="年" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" @click="rightHandleQuery()">搜索</el-button>
                            </el-col>
                        </el-row>
                    </el-form>

                </div>
                <div id="right_chart" style="width: 100%;height: 400px"></div>
            </div>

            <el-dialog title="详情" :visible.sync="detailOpen" append-to-body>
                <el-table :data="detailList" border>
                    <el-table-column label="名称" align="center" prop="name" />
                    <el-table-column label="数量/金额" align="center" prop="number" />
                    <el-table-column label="平均时效(秒)" align="center" prop="avg" />
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import CircularChart from "@/views/circular-chart.vue";
import * as echarts from "echarts";
import {listAvgUseTime, queryHotMobile, updateHotMobile} from "@/api/store/collect";
import {queryChatDataCostPrice, queryChatDataFineness, queryChatDataBrand, querySaleAndCost7, queryIndexData} from "@/api/recovery/goods";
import {queryChatDataPrice} from "@/api/store/collect";
import {listQuality} from "@/api/share/quality";
import {listShareGoods} from "@/api/share/goods";

export default {
    name: "index",
    components: {CircularChart},
    data() {
        return {
            indexData: [],
            queryParams: {
                fineness: undefined,
                shareGoodsId: undefined,
                startPrice: undefined,
                endPrice: undefined,
                time: 'day',
                rightTime: 'day'
            },
            qualityList: [],
            shareGoodsOptions: [],
            saleAndCost7: [],
            priceChatData: [],
            costChatData: [],
            finenessChatData: [],
            brandChatData: [],
            detailList: [],
            detailOpen: false,
            offerNameOptions:[],
            detail: {
                dataList: [
                    {label: '今日登记录量', value: '', text: '', list: []},
                    {label: '今日到货量', value: '', text: undefined},
                    {label: '今日入库量', value: '', text: undefined},
                    {label: '入库平均单价', value: '', text: undefined},
                    {label: '入库数据总览', value: '', text: ''},
                    {label: '待交接处理数据', value: '', text: ''},
                    {label: '报价师当天数据汇总', value: '', text: '', list: []},
                    {label: '热销机型(日)/月', value: '', text: '', valueStyle: 'font-size:12px'},
                    {label: '今日销售总额', value: '', text: ''},
                    {label: '今日销量/库存', value: '', text: undefined},
                    {label: '合作商回收量/金额', value: '0', text: ''},
                    {label: '报价师回收/毛利/耗损/判错', value: '0/0/0/0', text: ''},
                ]
            }
        };
    },
    created() {
        this.getDicts("dayu_offer_teach").then(response => {
            this.offerNameOptions = response.data;
        });

        queryChatDataCostPrice().then(res => {
            this.costChatData = res.data
        })

        queryChatDataFineness().then(res => {
            this.finenessChatData = res.data;
        })

        queryChatDataBrand().then(res => {
            this.brandChatData = res.data;
        })

        queryChatDataPrice().then(res => {
            this.priceChatData = res.data
        })

        listQuality({}).then(res => {
            this.qualityList = res.rows;
        })},
    mounted() {


        querySaleAndCost7({time: this.queryParams.rightTime}).then(res => {
            this.saleAndCost7 = res.data
            this.rightChartInit();
        })
        this.initData();
        this.getIndexData();
    },
    methods: {

        rightHandleQuery() {
            querySaleAndCost7({time: this.queryParams.rightTime}).then(res => {
                this.saleAndCost7 = res.data
                this.rightChartInit();
            })
        },
        getIndexData() {
            queryIndexData(this.queryParams).then(res => {
                this.indexData = res.data;
                this.leftChartInit();
            })
        },
        /** 共享模块商品信息 */
        getShareGoodsOptions(e) {
            listShareGoods({goodsName: e}).then(resp => {
                this.shareGoodsOptions = resp.rows;
            })
        },
        openDetail(e, k) {
            if(e.list) {
                this.detailOpen = true
                this.detailList = e.list;
            }
            if(k === 7) {
                this.$prompt('请输入热销机型', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    updateHotMobile(value).then(res => {
                        this.detail.dataList[7].value = value;
                    })
                })
            }
        },
        //初始化数据
        initData() {

            queryHotMobile().then(res => {
                this.detail.dataList[7].value = res.data.name;
            })

            //门店回收
            listAvgUseTime().then(res => {
                this.detail.dataList[1].value = res.data.collect;
                this.detail.dataList[2].value = res.data.rk;
                this.detail.dataList[3].value = res.data.avgCost ? res.data.avgCost.toFixed(2) + '￥' : '0￥';
                this.detail.dataList[4].value = res.data.stockNum;
                this.detail.dataList[5].value = res.data.jjcl;
                this.detail.dataList[8].value = res.data.salePrice ? res.data.salePrice + '￥' : '0￥';
                this.detail.dataList[9].value = res.data.saleAndNum;
                this.detail.dataList[10].value = res.data.collectPrice;
                let number = 0;
                let avg = 0;
                this.detail.dataList[0].list = res.data.useTime;
                this.detail.dataList[6].list = res.data.offerName;
                this.detail.dataList[0].list.forEach(item => {
                    number += Number(item.number);
                    avg += Number(item.avg);
                })

                let oNum = 0;
                this.detail.dataList[6].list.forEach(item => {
                    oNum += item.number;
                    for(let i = 0; i < this.offerNameOptions.length; i++) {
                        if(item.name === this.offerNameOptions[i].dictValue)
                            item.name = this.offerNameOptions[i].dictLabel
                    }
                })

                if(this.detail.dataList[0].list && this.detail.dataList[0].list.length > 0) {
                    avg = avg / this.detail.dataList[0].list.length;
                }
                this.detail.dataList[0].value = number;
                this.detail.dataList[0].text = '平均时效 ' + avg + "秒/条";
                this.detail.dataList[6].value = oNum;
            })
        },
        rightChartInit() {
            let dom = document.getElementById('right_chart');
            const chart = echarts.init(dom);
            const options =  {
                title: {
                    text: '出入金额对比'
                },
                xAxis: {
                    type: 'category',
                    data: this.saleAndCost7.date,
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    }

                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: ['入库金额', '售出金额']
                },
                series: [
                    {
                        data: this.saleAndCost7.cost,
                        type: 'bar',
                        name: '入库金额',
                        emphasis: {label: {show: true, position: 'top'}}
                    },
                    {
                        data: this.saleAndCost7.sale,
                        type: 'bar',
                        name: '售出金额',
                        emphasis: {label: {show: true, position: 'top'}}
                    }
                ]
            };

            chart.setOption(options);
        },
        leftChartInit() {
            let label= [];
            let value = [];
            this.indexData.forEach(item => {
                label.push(item.label);
                value.push(item.number);
            })
            let dom = document.getElementById('left_chart');
            const chart = echarts.init(dom);
            const options =  {
                title: {
                    text: '周期走势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: label
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        stack: 'Total',
                        data: value
                    }
                ]
            };

            chart.setOption(options);
        },
    },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #F2F6FC;
  padding: 20px;
}
.card-box {
  background-color: #FFFFFF;
  padding: 20px;
  font-size: 12px;
  color: #909399;
  line-height: 30px;
  .label-box, .text-box {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .value-box {
    height: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}
.title-box {
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
}
.circular-box {
  background-color: #FFFFFF;
  height: 200px;
  padding: 20px;
}
</style>

